import { DemoBlock } from 'demos';
import { Tabs, Input } from '@pxxtech/mobile';

export default () => {
  return (
    <>
      <DemoBlock title="基本用法" padding="0">
        <Tabs>
          <Tabs.Tab title="水果" value="fruits">
            <Input defaultValue="香蕉" />
          </Tabs.Tab>
          <Tabs.Tab title="蔬菜" value="vegetables">
            <Input defaultValue="胡萝卜" />
          </Tabs.Tab>
          <Tabs.Tab title="动物" value="animals">
            <Input defaultValue="蚂蚁" />
          </Tabs.Tab>
        </Tabs>
      </DemoBlock>
      <DemoBlock title="超长title" padding="0">
        <Tabs defaultActiveKey="1">
          <Tabs.Tab title="Espresso" value="1">
            1
          </Tabs.Tab>
          <Tabs.Tab title="Coffee Latte" value="2">
            2
          </Tabs.Tab>
          <Tabs.Tab title="Cappuccino" value="3">
            3
          </Tabs.Tab>
          <Tabs.Tab title="Americano" value="4">
            4
          </Tabs.Tab>
          <Tabs.Tab title="Flat White" value="5">
            5
          </Tabs.Tab>
          <Tabs.Tab title="Caramel Macchiato" value="6">
            6
          </Tabs.Tab>
          <Tabs.Tab title="Cafe Mocha" value="7">
            7
          </Tabs.Tab>
        </Tabs>
      </DemoBlock>
      <DemoBlock title="没有内容区" padding="0">
        <Tabs>
          <Tabs.Tab title="水果" value="fruits" />
          <Tabs.Tab title="蔬菜" value="vegetables" />
          <Tabs.Tab title="动物" value="animals" />
        </Tabs>
      </DemoBlock>
    </>
  );
};
